import React, { Component } from 'react';
import { PullToRefresh, ListView, Button } from 'antd-mobile';
import { getTradeList } from './actions';
import styles from './trade.css'
import moment from 'moment'

class TradeList extends Component {

    constructor(props){
        super(props);

        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });

        this.state = {
            dataSource,
            data:[],
            refreshing: true,
            isLoading: true,
            height: document.documentElement.clientHeight,
            useBodyScroll: false,
        }
    }

    componentDidMount(){
        this.page = 1;
        this.getTradeList();
    }

    getTradeList = () => {
        let oldData = this.state.data;
        getTradeList(this.page).then((data) => {
            console.log(data);
            let newData = [];
            if (this.page == 1){
                newData = data;
            }else{
                newData = oldData.concat(data);
            }
            
            this.setState({
                data:newData,
                dataSource: this.state.dataSource.cloneWithRows(newData),
                refreshing: false,
                isLoading: false,
            });
        })
    }

    onRefresh = () => {
        this.setState({ refreshing: true, isLoading: true });
        // simulate initial Ajax
        this.page = 1;
        this.getTradeList();
    };
    
      onEndReached = (event) => {
        // load new data
        // hasMore: from backend data, indicates whether it is the last page, here is false
        if (this.state.isLoading && !this.state.hasMore) {
          return;
        }
        this.setState({ isLoading: true });
        this.page = this.page + 1;
        this.getTradeList();
      };


    render(){

        const separator = (sectionID, rowID) => (
            <div
              key={`${sectionID}-${rowID}`}
              style={{
                backgroundColor: '#F5F5F9',
                height: 1,
              }}
            />
          );

        const row = (rowData, sectionID, rowID) => {
            return (
              <div key={rowData.id}
                className={styles.tradeContainer}
              >
                <div className={styles.info}>
                    <div className={styles.equip}>
                      设备号：{rowData.equipNo}
                    </div>
                    <div className={styles.grayStyle}>
                        {moment(rowData.tradedAt).format('YYYY-MM-DD HH:mm:ss')}
                    </div>
                </div>
                <div className={styles.info}>
                    <div className={styles.time}>
                        消费总金额：{rowData.totalAmount/100}元
                    </div>
                </div>
                <div className={styles.info}>
                    <div className={styles.time}>
                        消费金额：{rowData.usedAmount/100}元
                    </div>    
                </div>
                <div className={styles.info}>
                    <div className={styles.time}>
                        退款金额：{rowData.refundAmount/100}元
                    </div>    
                </div>
              </div>
            );
          };

        return (
            <ListView
                    key={this.state.useBodyScroll ? '0' : '1'}
                    ref={el => this.lv = el}
                    dataSource={this.state.dataSource}
                    renderFooter={() => (<div style={{ padding: 10, textAlign: 'center' }}>
                    {this.state.isLoading ? '加载中' : '加载完成'}
                    </div>)}
                    renderRow={row}
                    renderSeparator={separator}
                    useBodyScroll={this.state.useBodyScroll}
                    style={this.state.useBodyScroll ? {} : {
                    height: this.state.height,
                    border: '1px solid #ddd',
                    }}
                    pullToRefresh={<PullToRefresh
                    refreshing={this.state.refreshing}
                    onRefresh={this.onRefresh}
                    />}
                    onEndReached={this.onEndReached}
                    pageSize={5}
                />
        )
    }
}

export default TradeList;

